<template>

    <div>
        <el-form :model="form" :rules="rules" size="mini" inline ref="form" label-width="140px" class="demo-ruleForm">
            <el-form-item label="市">
                <el-input v-model="defaultCity.city_name" disabled></el-input>
            </el-form-item>
            <!-- <el-form-item label="区" prop="w_area_id">
                <el-select v-model="form.w_area_id" placeholder="请选择">
                    <el-option v-for="(item,index) in defaultCity.area_list" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>	
            </el-form-item> -->
            <el-form-item label="地铁" prop="w_metro_id">
                <el-select v-model="form.w_metro_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.metro" :key="index" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="环线" prop="w_ring_id">
                <el-select v-model="form.w_ring_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.ring" :key="index" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="楼盘名称" prop="w_name">
                <el-input v-model="form.w_name" placeholder="请输入" @change="namechange"></el-input>
            </el-form-item>
            <el-form-item label="楼盘字典别名" prop="w_as_name">
                <el-input v-model="form.w_as_name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="楼盘简写" prop="w_spell">
                <el-input v-model="form.w_spell" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="用途" prop="w_purpose_id">
                <el-select v-model="form.w_purpose_id" placeholder="请选择" @change="typeChange">
                    <el-option v-for="(item,index) in info.transaction" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 1">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.zsq_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 2">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.spw_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 3">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.xx_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 4 || typeOne === 5">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.cc_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 6">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.dp_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="w_type_id" v-if="typeOne === 7">
                <el-select v-model="form.w_type_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.c_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="建房年代" prop="w_building_house">
                <el-input type="number" v-model="form.w_building_house" placeholder="2018"></el-input>
            </el-form-item>
            <el-form-item label="产权年限" prop="w_property">
                <el-input v-model="form.w_property" placeholder="40年"></el-input>
            </el-form-item>
            <el-form-item label="概要地址" prop="w_resume_address">
                <el-input v-model="form.w_resume_address" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="w_info_address">
                <el-input v-model="form.w_info_address" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="均售价" prop="w_avg_price">
                <el-input v-model="form.w_avg_price" placeholder="8000元"></el-input>
            </el-form-item>
            <el-form-item label="结构" prop="w_structure">
                <el-select v-model="form.w_structure" placeholder="请选择">
                    <el-option v-for="(item,index) in info.structure" :key="index" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理费" prop="w_admin_price">
                <el-input v-model="form.w_admin_price" placeholder="100元"></el-input>
            </el-form-item>
            <el-form-item label="建筑面积" prop="w_acreage">
                <el-input v-model="form.w_acreage" placeholder="150平方米"></el-input>
            </el-form-item>
            <el-form-item label="土地" prop="w_land">
                <el-select v-model="form.w_land" placeholder="请选择">
                    <el-option v-for="(item,index) in info.land" :key="index" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="总户数" prop="w_house_num">
                <el-input v-model="form.w_house_num" placeholder="2户"></el-input>
            </el-form-item>
            <el-form-item label="外墙" prop="w_wall_id">
                <el-select v-model="form.w_wall_id" placeholder="请选择">
                    <el-option v-for="(item,index) in info.wall" :key="index" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地号" prop="w_land_num">
                <el-input v-model="form.w_land_num" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="开发商" prop="w_owner">
                <el-input v-model="form.w_owner" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="开发商电话" prop="w_owner_phone">
                <el-input type="number" v-model="form.w_owner_phone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="物业名称" prop="w_property_name">
                <el-input v-model="form.w_property_name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="物业公司电话" prop="w_property_phone">
                <el-input type="number" v-model="form.w_property_phone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="w_remark">
                <el-input type="textarea" v-model="form.w_remark" placeholder="请输入"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer"  style="text-align:center;">
            <el-button @click="cancel('form',1)" size="mini">取 消</el-button>
            <el-button type="primary" @click="submit('form',1)" size="mini">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import conf from '../../../../config/userconf.js'
    import transformation from '../../../../assets/js/transformation.js'
    export default {
        name: "Editbuildingdictionary",
        props: {
            tjstatus: {
                type: Number,
                required: true
            },
            editcont: {
                type: Object,
                required: true
            },
        },
        data () {
            var validatePhone = (rule,value,callback) => {    //正则手机号

                var MobileRegex = /^1[3|4|5|7|8][0-9]{9}$/;
                if (!MobileRegex.test(value)) {
                    callback(new Error('手机号格式不正确！'))
                } else {
                    callback();
                }
            };
            var validateTel = (rule,value,callback) => {    //正则座机号
                var MobileRegex = /(^(\d{3,4}-)\d{7,8}$)|(^\d{7,8}$)/;
                if (!MobileRegex.test(value)) {
                    callback(new Error('电话格式不正确！'))
                } else {
                    callback();
                }
            };
            var validateaz = (rule,value,callback) => {    //正则小写字母

                var MobileRegex = /^[a-z]+$/;
                if (!MobileRegex.test(value)) {
                    callback(new Error('只能输入小写字母格式哦~'))
                } else {
                    callback();
                }
            };
            return {
                form:{
                    // w_area_id:'',
                    w_metro_id:'',
                    w_ring_id:'',
                    w_name:'',
                    w_as_name:'',
                    w_spell:'',
                    w_purpose_id:3,
                    w_type_id:'',
                    w_building_house:'',
                    w_property:'',
                    w_resume_address:'',
                    w_info_address:'',
                    w_avg_price:'',
                    w_admin_price:'',
                    w_remark:'',
                    w_acreage:'',
                    w_structure:'',
                    w_land:'',
                    w_house_num:'',
                    w_wall_id:'',
                    w_land_num:'',
                    w_owner:'',
                    w_owner_phone:'',
                    w_property_name:'',
                    w_property_phone:'',
                },
                rules:{
                    // w_area_id: [
                    //     { required: true, message: '请选择', trigger: 'change' }
                    // ],
                    w_metro_id: [
                        { required: false, message: '请选择', trigger: 'change' }
                    ],
                    w_ring_id: [
                        { required: false, message: '请选择', trigger: 'change' }
                    ],
                    w_building_house: [
                        { required: true, message: '请输入建房年代', trigger: 'blur' }
                    ],
                    w_name: [
                        { required: true, message: '请输入楼盘名称', trigger: 'blur' }
                    ],
                    w_spell: [
                        { required: true, message: '请输入楼盘首字母简写', trigger: 'blur' },
                        { required: true, validator: validateaz, trigger: 'blur'}
                    ],
                    w_purpose_id: [
                        { required: true, message: '请选择用途', trigger: 'change' }
                    ],
                    w_type_id: [
                        { required: true, message: '请选择物业类型', trigger: 'change' }
                    ],
                    w_property_phone: [
                        { required: false, message: '请输入物业公司电话', trigger: 'blur' },   //非必填字段，value不为空时进行校验
                        {
                            validator:(rule,value,callback)=>{
                                if(value != ""){
                                    if(value.length < 11 ){
                                        validateTel(rule,value,callback)
                                    }else if(value.length >= 11){
                                        validatePhone(rule,value,callback)
                                    }
                                    
                                }else{
                                    callback();
                                }
                            }, trigger: 'blur'
                        },
                    ],
                    w_owner_phone: [
                        { required: false, message: '请输入开发商电话', trigger: 'blur' },
                        {
                            validator:(rule,value,callback)=>{
                                if(value != ""){
                                    if(value.length < 11 ){
                                        validateTel(rule,value,callback)
                                    }else if(value.length >= 11){
                                        validatePhone(rule,value,callback)
                                    }
                                    
                                }else{
                                    callback();
                                }
                            }, trigger: 'blur'
                        },
                    ],
                },
                defaultCity: {},
                info: [],
                dialogtitle: '添加楼盘字典',
                w_id: '',  //楼盘字典id
                typeOne: 1,  //用途更改    所填资料类型
            }
        },
        methods: {
            // 获取客户端默认区
            area(data=null){
                conf.common.defaultCity(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res.data.data);
                        this.defaultCity = res.data.data;
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            /* 添加页面下拉数据*/
            optdata (data=Object()){
                conf.buildingdictionary.optdata(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.info = res.data.data;   
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.info = [];
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            /*取消 */
            cancel (formName,type) {
                //传数据至父组件   关闭弹框   
                this.$emit('dialogstatus','');
                // this.centerDialogVisible = false;
                this.$refs[formName].resetFields();
            },
            
            /*提交 */
            submit (formName,type) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.judgeprimise();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*判断提交 */
            judgeprimise (data=Object()) {
                if (this.tjstatus == 1) {
                    conf.buildingdictionary.add(this.form,(state,res)=>{
                        if (state == 'success'&&res.data.code == 0){
                            //传数据至父组件   添加修改成功   
                            this.$emit('listdata','');
                            // this.getList();
                            //传数据至父组件   关闭弹框   
                            this.$emit('dialogstatus','');
                            // this.centerDialogVisible = false;
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        }else if(state == 'success'&&res.data.code != 0){
                            if(res.data.code == 401){
                                this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: res.data.msg
                                });
                            }
                        }
                    })
                }else if (this.tjstatus == 2){
                    data = this.form;
                    data.w_id = this.w_id;
                    conf.buildingdictionary.edit(data,(state,res)=>{
                        if (state == 'success'&&res.data.code == 0){
                            //传数据至父组件   添加修改成功   
                            this.$emit('listdata','');
                            // this.getList();
                            //传数据至父组件   关闭弹框   
                            this.$emit('dialogstatus','');
                            // this.centerDialogVisible = false;
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }else if(state == 'success'&&res.data.code != 0){
                            if(res.data.code == 401){
                                this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: res.data.msg
                                });
                            }
                        }
                    })
                }
            },
            namechange(val){
                // console.log(val);
                this.form.w_spell = transformation.fisrtCharFromPinYin(val);
            },
            //修改页面  表单数据赋值
            statusHandle(){
                console.log(this.editcont);
                if(this.tjstatus == 1){
                    // console.log('--------this.editcont==========',this.editcont);
                    if(this.editcont.w_room_name){  //添加房源信息时，输入的楼盘字典不存在，则直接添加
                        this.form.w_name = this.editcont.w_room_name;  //楼盘字典名称赋值
                    }

                }else if (this.tjstatus == 2){
                    let val = this.editcont;
                    this.w_id = val.w_id;
                    this.form = {
                        // w_area_id: val.w_area_id,
                        w_metro_id: val.w_metro_id,
                        w_ring_id: val.w_ring_id,
                        w_name: val.w_name,
                        w_as_name: val.w_as_name,
                        w_spell: val.w_spell,
                        w_purpose_id: val.w_purpose_id,
                        w_type_id: val.w_type_id,
                        w_building_house: val.w_building_house,
                        w_property: val.w_property,
                        w_resume_address: val.w_resume_address,
                        w_info_address: val.w_info_address,
                        w_avg_price: val.w_avg_price,
                        w_admin_price: val.w_admin_price,
                        w_remark: val.w_remark,
                        w_acreage: val.w_acreage,
                        w_structure: val.w_structure,
                        w_land: val.w_land,
                        w_house_num: val.w_house_num,
                        w_wall_id: val.w_wall_id,
                        w_land_num: val.w_land_num,
                        w_owner: val.w_owner,
                        w_owner_phone: val.w_owner_phone,
                        w_property_name: val.w_property_name,
                        w_property_phone: val.w_property_phone,
                    };
                }
            },
            // 用途 change
            typeChange(val){
                // console.log(val);
                this.form.w_type_id = '';
                //3 住宅 、4 商住 、14 其他
                //5 商铺 、6 网点 、10 铺厂 
                //7 写字楼 、9 写厂
                //8 厂房
                //11 仓库
                //12 地皮 
                //13 车位
                switch(val){
                    case 3:
                        this.typeOne = 1;
                        break;
                    case 4:
                        this.typeOne = 1;
                        break;
                    case 5:
                        this.typeOne = 2;
                        break;
                    case 6:
                        this.typeOne = 2;
                        break;
                    case 7:
                        this.typeOne = 3;
                        break;
                    case 8:
                        this.typeOne = 4;
                        break;
                    case 9:
                        this.typeOne = 3;
                        break;
                    case 10:
                        this.typeOne = 2;
                        break;
                    case 11:
                        this.typeOne = 5;
                        break;
                    case 12:
                        this.typeOne = 6;
                        break;
                    case 13:
                        this.typeOne = 7;
                        break;
                    case 14:
                        this.typeOne = 1;
                        break;
                }
            },
        },
        mounted (){
            this.$nextTick(function(){
                this.area(); //省市区
                this.optdata();  //下拉框数据
                this.statusHandle();  //页面状态处理（新增、修改）   
            })
        },

    }
</script>